<template>
  <div class="promotion-detail">
    <h1 class="title">Order Deatils <span class="back" @click="back">< Return To Promotin Orders list</span></h1>
    <div class="cont clearfix">
      <div class="cont-left">
        <div class="items">
          <h3 class="state-title">Your Items</h3>
          <ul class="list-box">
            <li class="li clearfix" v-for="(item ,index ) in orderItems" :key="index">
              <div class="img-box">
                <img v-lazy="imgurl +item.productInOrder.images[0].src" alt="" class="img">
              </div>
              <div class="goods-info">
                <h4 class="h4">{{item.productInOrder.headLine}}</h4>
                <p class="goods-type">
                  <span>{{attriubteDefine(item.productInOrder.variation)}}</span>
                </p>
                <div class="num-box"><span>Qty:</span><span class="num">{{item.qty}}</span></div>
                <p class="address">Free shipping</p>
              </div>
              <div class="price-show">
                <p class="price1">${{item.productInOrder.price}}</p>
                <p class="price2"><span class="old-price">${{item.productInOrder.originalPrice}}</span> <span class="rebate-price">You Save ${{parseFloat(item.productInOrder.originalPrice - item.productInOrder.price).toFixed(2)}}</span></p>
              </div>
            </li>
            <li class="loading-container" v-show="Loading">
              <loading></loading>
            </li>
          </ul>
        </div>
      </div>
      <div class="cont-right">
        <div class="state-box">
          <h3 class="state-title">Order Tracking</h3>
          <div class="space-h3"></div>
          <table class="table-show">
            <tr  v-for="(item,index) in tracke_list" :key="index">
              <td class="time">
                <p>{{item.date}}</p>
                <p>{{item.time}}</p>
              </td>
              <td class="link">
                <div class="link-show" :class="index === tracke_list.length-1 ? 'hide':''"></div>
                <span class="round"  v-bind:class="{'success-round':index === 0}"></span>
              </td>
              <td class="des">
                <p class="words" :class="index === 0 ? 'black-font':''" v-html="item.des"></p>
                <div class="space-div"></div>
              </td>
            </tr>
          </table>
          <div style="width:100%;height:45px;line-hieght:45px;font-size:16px;text-align: center" v-if="tracke_list.length === 0">
            No more information
          </div>
        </div>
        <div class="person-info">
          <h3 class="state-title">Person Information</h3>
          <ul>
            <li class="li-title">Customer</li>
            <li class="li-info">{{recipient.contactName}}</li>
            <li class="li-title">Shipping method & address</li>
            <li class="li-info">Free Sipping</li>
            <li class="li-info more-text">
              <p>{{address.street1 + address.street2 + address.street3}}</p>
              <p>{{address.city}}, {{address.province}}, {{address.postcode}}</p>
              <p>{{address.country}}</p>
            </li>
            <li class="li-info">{{recipient.email}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Loading from 'base/loading/loading'
  import {mapActions} from 'vuex'
  import {MyOrderList} from 'api/my-order-list'
  export default {
    data(){
      return{
        Loading: false,
        allData : [],
        tracke_list :[],
        orderItems :[],
        imgurl : imgUrl,
        recipient : {
          contactName :'',
          tel : '',
          email :'',
        },
        address:{
          city: "",
          country: "",
          postcode: "",
          province: "",
          street1: "",
          street2: "",
          street3: "",
        }
      }

    },
    created(){
      this.$nextTick(function(){
        this._MyOrderList()
      })
    },
    methods:{
      back() {
        this.$router.push({
          path:'/my-order/promotion'
        });
      },
      _MyOrderList() {
        //保持页面不刷新
        const path = this.$router.currentRoute.fullPath.split('/')
        let orderNo = ''
        if (path[3]) {
          orderNo = path[3]
        }else{
          this.$router.push(`/${path[1]}/${path[2]}`)
          return
        }
          MyOrderList(orderNo).then((res) => {
            const _this = this
            this.allData = res
            this.recipient = res.recipient
            this.address = res.address
            this.orderItems = res.orderItems
            let orderEvents = res.orderEvents
            let orderEnventLen = orderEvents.length - 1;
            let _res = res;
            orderEvents.forEach(function (item, index) {
              let ret = {}
              let allDate = orderEvents[orderEnventLen - index].eventTime.split("T");
              ret.date = allDate[0].replace(new RegExp("-", "gm"), '/');
              ret.time = allDate[1].substring(0, 5);
              ret.des = orderEvents[orderEnventLen - index].description;
              if(index === orderEnventLen){
                ret.des+='<p style="font-size:12px;text-align left;line-height: 15px;margin-top: 9px;color: #999;">Order Number: #'+ _res.orderNo +' <br>Paypal Number: '+ _res.paypalAccount +'</p>'
              }
              _this.tracke_list.push(ret)
            })
            // this.$refs.scrollOrderList.refresh()
          })
      },
      attriubteDefine : function(productAttributes){ //商品属性拼接
        if(!productAttributes){
          return
        }
        let str = ''
        if(productAttributes.productAttributes.length === 0){
          return str
        }
        productAttributes.productAttributes.forEach(function(item,index){
          str += item.value+'/'
        })
        str = str.substring(0,str.length-1);
        return str
      },
        ...mapActions([
          'StartLoading'
        ])
      },
    components: {
      Loading,
    },
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .state-title
    text-align left
    height:44px
    line-height:44px
    font-size:18px
    color: #333
    background #f6f7f8
    padding-left: 23px;
    border-bottom:1px solid #dcdcdc
  .promotion-detail
    width:100%
    padding-bottom:75px;
    .title
      font-size:20px;
      line-height:50px
      color: #333333
      padding-top: 20px;
      position: relative
      .back
        position absolute
        right:0;
        top:20px;
        color #18823a
        font-size:14px
        cursor:pointer
    .detail-list
      margin-top:30px;
    .cont
      height:auto;
      margin-top: 30px;
      .cont-left
        width:716px;
        height:100%
        float:left;
        .items
          border:1px solid #dcdcdc
          border-bottom:none
          .li
            padding: 20px 20px 12px 20px;
            border-bottom:1px solid #dcdcdc
            font-size: 18px;
            display:flex
            .img-box
              width: 200px
              padding-right:20px;
              background #fff
              text-align center
              .img
                max-width:200px
                max-height:160px
                vertical-align: middle;
            .goods-info
              color:#333
              flex 1
              position:relative
              .h4
                width:100%;
                line-height:22px
                font-size: 16px;
                text-overflow: -o-ellipsis-lastline;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              .goods-type
                font-size 14px;
                color:#bbb
                margin-top: 10px;
              .num-box
                margin-top:18px;
                font-size: 20px;
                span
                  vertical-align middle
                .num
                  margin-left: 15px;
              .address
                margin-top:10px;
                padding-top:12px;
                border-top:1px solid #eaedf1
                position:absolute
                left:0
                bottom:0
                width: 454px;
                font-size: 16px;
            .price-show
              width:195px
              text-align right
              color:#333
              .price1
                font-size:30px
                line-height:60px
              .price2
                margin-top: -6px;
                .old-price
                  margin-right:5px;
                  text-decoration:line-through
                  color:#98999a
                .rebate-price
                  color:#4999e2
                  font-size: 14px;
      .cont-right
        width: 330px;
        float:right
        .state-box
          border:1px solid #dcdcdc
          height:auto;
        .space-h3
          height:50px;
        .table-show
          color: #98999a
          padding-left:3%
          tr:nth-child(1)
            .link
              .success-round
                position:absolute
                left: -6px;
                top:0
                display:inline-block
                width:14px
                height:14px
                background #2f4bf7
              .red-round
                position:absolute
                left: -6px;
                top:0
                display:inline-block
                width:12px
                height:12px
                background-image url('my_order_list_del.png')
                background-color:#fff
                background-repeat no-repeat
                background-position center center
              .des
                .btn
                  width:70%
                  height:28px;
                  line-height:28px;
                  color: #ffffff
                  background #2f4bf7
                  text-align center
                  margin:10px 0
                  border:none
                  display:block
          .time
            text-align: right
            width: 27%
            height:auto
            padding-right:5%
            line-height: 20px
            p
              font-size: 14px;
          .link
            width:5%
            padding:5px 0
            position:relative
            .link-show
              position:absolute
              left:0
              width:1px
              height: 100%
              background #ccc
            .hide
              display:none
            .round
              display:inline-block
              position:absolute
              left: -4px;
              top: 5px;
              width: 9px;
              height: 9px;
              border-radius: 50%
              background #bbb
          .des
            width:56%
            padding-right: 4%;
            font-size:14px;
            word-break:keep-all
            text-align center
            .words
              font-size:14px
              line-height:20px
              text-align left
            .black-font
              color:#000
            .btn
              width:70%
              height:28px;
              line-height:28px;
              color: #ffffff
              background #2f4bf7
              text-align center
              margin:10px 0
              border:none
            .space-div
              height:45px
  .no-result-wrapper
    width: 100%
    height:100%
    border-bottom: 1px solid #dcdcdc;
  .loading-container
    width: 100%
    height: 276px;
    padding-top: 192px;
    border-bottom: 1px solid #dcdcdc;
  .person-info
    border: 1px solid #dcdcdc;
    border-bottom:none
    margin-top:20px;
    li
      padding-left:20px
      min-height:44px;
      line-height:44px;
      border-bottom:1px solid #dcdcdc
    .li-info
      font-size:14px;
    .more-text
      padding-top:10px
      padding-bottom:10px
      p
        line-height:26px;



</style>
